* @return {boolean}
*/
isElementInViewport: function ( el, rectangle ) {
- var elRect = el.getBoundingClientRect(),
+ var $el = $( el ),
+ offset = $el.offset(),
+ rect = {
+ height: $el.height(),
+ width: $el.width(),
+ top: offset.top,
+ left: offset.left
+ },
viewport = rectangle || this.makeViewportFromWindow();
return (
- ( viewport.bottom >= elRect.top ) &&
- ( viewport.right >= elRect.left ) &&
- ( viewport.top <= elRect.top + elRect.height ) &&
- ( viewport.left <= elRect.left + elRect.width )
+ // Top border must be above viewport's bottom
+ ( viewport.bottom >= rect.top ) &&
+ // Left border must be before viewport's right border
+ ( viewport.right >= rect.left ) &&
+ // Bottom border must be below viewport's top
+ ( viewport.top <= rect.top + rect.height ) &&
+ // Right border must be after viewport's left border
+ ( viewport.left <= rect.left + rect.width )
);
},
'It should default to the window object if no viewport is given' );
} );
+ QUnit.test( 'isElementInViewport with scrolled page', 1, function ( assert ) {
+ var viewport = {
+ top: 2000,
+ left: 0,
+ right: 1000,
+ bottom: 2500
+ },
+ el = $( '<div />' )
+ .appendTo( '#qunit-fixture' )
+ .width( 20 )
+ .height( 20 )
+ .offset( {
+ top: 2300,
+ left: 20
+ } )
+ .get( 0 );
+ window.scrollTo( viewport.left, viewport.top );
+ assert.ok( mw.viewport.isElementInViewport( el, viewport ),
+ 'It should return true when the element is fully enclosed in the ' +
+ 'viewport even when the page is scrolled down' );
+ window.scrollTo( 0, 0 );
+ } );
+
QUnit.test( 'isElementCloseToViewport', 3, function ( assert ) {
var
viewport = {